<template>
  <div id="chartLine" :style="{ height: '300px', width: '800px' }"></div>
</template>

<script>
import echarts from "echarts"; //这里是你必须的，千万不能忘记！
export default {
  name: "CommentReply",
  mounted() {
    this.chartLine = echarts.init(document.getElementById("chartLine"));

    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        //设置tip提示
        trigger: "axis",
      },

      legend: {
        //设置区分（哪条线属于什么）
        data: ["expected", "actual"],
      },
      color: ["#3a89fa", "#ff065e"], //设置区分（每条线是什么颜色，和 legend 一一对应）
      xAxis: {
        //设置x轴
        type: "category",
        boundaryGap: false, //坐标轴两边不留白
        data: [
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri",
          "Sat",
          "Sun",
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri",
          "Sat",
          "Sun",
        ],

        nameTextStyle: {
          //坐标轴名称的文字样式
          color: "#3a89fa",
          fontSize: 16,
          padding: [0, 0, 0, 20],
        },
        axisLine: {
          //坐标轴轴线相关设置。
          lineStyle: {
            color: "#3a89fa",
          },
        },
      },
      yAxis: {
        nameTextStyle: {
          color: "#3a89fa",
          fontSize: 16,
          padding: [0, 0, 10, 0],
        },
        axisLine: {
          lineStyle: {
            color: "#3a89fa",
          },
        },
        type: "value",
      },
      series: [
        {
          name: "expected",
          data: [
            720,
            200,
            950,
            357,
            70,
            510,
            500,
            129,
            336,
            407,
            598,
            369,
            444,
            336,
          ],
          type: "line", // 类型为折线图
          smooth: true,
          lineStyle: {
            // 线条样式 => 必须使用normal属性
            normal: {
              color: "#3a89fa",
            },
          },
        },
        {
          name: "actual",
          data: [
            110,
            232,
            451,
            334,
            290,
            530,
            150,
            200,
            335,
            246,
            557,
            889,
            555,
            632,
          ],
          type: "line",
          smooth: true,
          lineStyle: {
            normal: {
              color: "#FA6F53",
            },
          },
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    this.chartLine.setOption(option);
  },
};
</script>
